<template>
	<view class="box">
		<view class="bg-card">
			<div class="blocks">
				<view class="block">
					<text>体检人</text>
					<text>{{ userInfo.username }}</text>
					<text class="card">身份证号</text>
					<text>{{ userInfo.idcard }}</text>
				</view>
				<view class="ewm">
					<canvas canvas-id="qrcode" style="width: 170px; height: 170px; margin: 0 auto"></canvas>
					<text class="date">有效期至：{{ descList.endTime }}</text>
				</view>
			</div>
			<view class="footer">
				<view>已用：<text class="use">{{ descList.useNum || 0 }}</text>次</view>
				<view>剩余：<text class="num">{{
            Number(descList.num || 0) - Number(descList.useNum || 0)
          }}</text>次</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import uQRCode from "@/js_sdk/Sansnn-uQRCode/uqrcode.js";
	import {
		queryById
	} from "@/api/trading.js";
	export default {
		computed: mapGetters(["userInfo"]),
		data() {
			return {
				descList: {},
				timer: null,
				id: ''
			};
		},
		onLoad(options) {
			const {
				id
			} = options
			this.id = id
			this.gerQuery(id)
		},
		onShow() {
			this.timer = setInterval(() => {
				this.gerQuery(this.id)
			}, 2000);
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		mounted() {},
		methods: {
			gerQuery(id = '') {
				queryById({
						id
					})
					.then((res) => {
						this.descList = res.result
						this.qrFun();
					})
					.catch((res) => {
						this.$util.Tips({
							title: res,
						});
					});
			},
			//**生成二维码**//
			qrFun() {
				const texts = this.descList.cardNo;
				uQRCode.make({
					canvasId: "qrcode",
					componentInstance: this,
					text: texts, //这里的text需要生成的二维码地址
					size: 170, //和上面保持一致即可默认像素
					margin: 0,
					backgroundColor: "#ffffff",
					foregroundColor: "#000000",
					fileType: "jpg",
					errorCorrectLevel: uQRCode.errorCorrectLevel,
					success: (res) => {},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("../../static/css/gstyle.scss");

	.box {
		overflow: hidden;
		background-color: #60ca77;
		height: calc(100vh - 44px);
		padding: 0 22rpx;

		.bg-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			width: 100%;
			height: 75%;
			margin-top: 10%;
			background: url("/static/images/ewmbg.png") no-repeat center;
			background-size: 100% 100%;
			padding: 33rpx 0;

			.blocks {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 80%;

				.block {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					height: 250rpx;
				}

				.ewm {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					height: 200px;

					.date {
						color: #a8a8a8;
					}
				}


			}

			.footer {
				position: absolute;
				bottom: 13%;
				display: flex;
				justify-content: space-between;
				width: 170px;
				margin-top: 32rpx;

				.use {
					color: #f9970d;
				}

				.num {
					color: rgb(11, 198, 11);
				}
			}
		}
	}
</style>